<template>
  <div class="container">
    <el-card>
      <!-- 【顶部的内容区域】 -->
      <page-tools :show-before="true">
        <template v-slot:before>
          <span>说明：只支持学科和关键字的筛选</span>
        </template>
        <template v-slot:after>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push('new')"
          >
            新增试题
          </el-button>
        </template>
      </page-tools>
      <!-- 【form表单区域  表单组件】 -->
      <que-cho-form @search-info="searchInfoOK" />
      <!-- 【下部选项卡】 -->
      <el-tabs
        type="card"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-row
          type="flex"
          justify="start"
          align="center"
          class="que-total"
        >
          <i class="el-icon-info" />
          <span class="que-text">数据一共{{totalCount}}条</span>
        </el-row>
        <!-- 【tab栏切换】****** -->
        <el-tab-pane
          label="全部"
          name="4"
        >
        </el-tab-pane>

        <el-tab-pane
          label="待审核"
          name="0"
        >

        </el-tab-pane>
        <el-tab-pane
          label="已审核"
          name="1"
        >

        </el-tab-pane>
        <el-tab-pane
          label="已拒绝"
          name="2"
        >
        </el-tab-pane>
      </el-tabs>
      <el-table
        :data="choiceQuestionsList"
        border
        style="width: 100%"
        size="small"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="150"
        >
        </el-table-column>
        <!-- 【我不绑定subjectId不就行了】 -->
        <el-table-column
          prop="subject"
          label="学科"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="catalogID"
          label="目录"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="120"
          :formatter="formatSubjectType"
        >
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="120"
        >
          <template slot-scope="{row}">
            {{row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="120"
          :formatter="formatDifficulty"
        >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="120"
          :formatter="formatChkType"
        >
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="120"
          :formatter="formatPublishType"
        >

        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300"
        >

          <template v-slot="{row}">
            <!-- <div>{{row}}</div> -->
            <el-row>
              <el-col :span="4">
                <el-button
                  type="text"
                  size="small"
                  @click="ShowPreview(row.id)"
                >预览</el-button>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="text"
                  size="small"
                  @click="checkQuestion(row.id)"
                  :disabled="row.chkState === 0 ? false : true"
                >审核</el-button>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push({path:'new',query:{id:row.id}})"
                  :disabled="row.publishState === 1 ? false : true"
                >修改</el-button>
              </el-col>
              <el-col :span="8">
                <el-row>
                  <el-button
                    v-if="row.publishState === 1"
                    type="text"
                    size="small"
                    @click="choicePublishUp(row)"
                  >上架</el-button>
                  <el-button
                    v-else
                    type="text"
                    size="small"
                    @click="choicePublishDown(row)"
                  >下架</el-button>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="text"
                  size="small"
                  @click="delQuestion(row.id)"
                  :disabled="row.publishState === 1 ? false : true"
                >删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="end"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="20"
          layout=" prev, pager, next,  sizes,jumper"
          :total="400"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 【预览的弹层】 -->
    <question-preview
      :showPreviewDialog.sync="showPreviewDialog"
      ref="questionPreview"
      :pre-subject-id="preSubjectId"
    />
    <!-- 试题审核的弹层 -->
    <que-cho-check-dialog
      :showCheckDialog.sync="showCheckDialog"
      :pre-subject-id="preSubjectId"
      ref="questionCheck"
    />

  </div>

</template>

<script>
import PageTools from '@/components/PageTools'
import QueChoForm from './components/que-cho-form.vue'
// 预览的组件
import questionPreview from '@/components/question/questionPreview.vue'
// import { choice } from '@/api/hmmm/questions'

// choiceCheck choicePublish
import { choice, remove, choicePublish } from '@/api/hmmm/questions.js'
import { list } from '@/api/hmmm/subjects.js'
import { questionType, difficulty, chkType, publishType } from '@/api/hmmm/constants.js'

// import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'
import queChoCheckDialog from './components/que-cho-checkDialog.vue'
export default {
  data () {
    return {
      formData: {
        // 学科
        subjectID: '',
        // 难度
        difficulty: '',
        // 试题类型
        questionType: '',
        // 标签名称
        tags: '',
        // 企业所在地省份
        province: '',
        // 企业所在城市
        city: '',
        // 关键字
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 目录
        catalogID: '',
        // 审核状态
        chkState: ''
      },
      activeName: 'first',
      // 精选试题列表
      ChoiceList: [],
      page: 1,
      pagesize: 10,
      total: '',
      // 预览试题的弹出层
      showPreviewDialog: false,

      // 下边表格的数据
      tableData: {
        // 试题编号
        number: '',
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 题型
        questionType: '',
        // 题干
        question: '',
        // 录入时间
        addDate: '',
        // 难度
        difficulty: '',
        // 录入人
        creator: '',
        // 审核状态
        chkState: '',
        // 审核意见
        chkRemarks: '',
        // 审核人
        chkUser: '',
        // 发布状态
        publishState: ''
      },
      // 精选试题列表
      choiceQuestionsList: [],
      // page: 1,
      // pagesize: 10,
      subjectList: [],
      questionType: questionType,
      // 试题难度
      difficulty: difficulty,
      // 审核状态
      chkType: chkType,
      // 发布状态
      publishType: publishType,
      // 当前点击的试题的id
      preSubjectId: null,
      // 审核弹层
      showCheckDialog: false,

      // 待审核的列表
      ChkStateList: [],
      // 学科的简单列表，实现表格中数字的对照
      DirectorysType: '',
      // 分页
      currentPage1: 1
    }
  },
  components: {
    PageTools,
    // // form表单组件
    QueChoForm,
    // 预览的组件
    questionPreview,
    // 审核的弹层
    queChoCheckDialog
  },
  computed: {
    totalCount () {
      return this.total
    },
    checkState () {
      return this.tableData.chkState
    }
  },
  created () {
    this.getChoiceList()
    this.getSubjectList()
    // // 获取目录的简单列表，实现表格中数字的对照
    // this.getSimpleDirectorys()
  },
  methods: {
    // 获取所有的精选题库的列表
    async getChoiceList () {
      const { data } = await choice({
        page: this.page,
        pagesize: this.pagesize
      })
      this.choiceQuestionsList = data.items
      this.total = data.items.length
      // console.log(this.total)
      // console.log(this.choiceQuestionsList)
    },

    // 学科列表
    async getSubjectList () {
      const { data } = await list()
      // console.log(data)
      this.subjectList = data.items
      this.total = data.total
      // console.log(this.subjectList)
    },
    // 设置试题类型的格式
    formatSubjectType (row, column, cellValue) {
      // debugger
      const obj = this.questionType.find(item => item.value.toString() === cellValue)
      // debugger
      // console.log(obj)
      return obj ? obj.label : '未知'
    },
    // 难度
    formatDifficulty (row, column, cellValue) {
      const obj = this.difficulty.find(item => item.value.toString() === cellValue)
      // debugger
      // console.log(obj)
      return obj ? obj.label : '未知'
    },
    // 审核状态
    formatChkType (row, column, cellValue) {
      const obj = this.chkType.find(item => item.value === cellValue)
      // debugger
      return obj ? obj.label : '未知'
    },
    // 发布状态
    formatPublishType (row, column, cellValue) {
      const obj = this.publishType.find(item => item.value === cellValue)
      // debugger
      // console.log(obj)
      return obj ? obj.label : '未知'
    },
    // 删除功能
    async delQuestion (id) {
      try {
        // 弹出对话框
        await this.$confirm('此操作将永久删除该题目，是否继续？')
        // 删除数据【将删除的方法引进来】
        await remove({ id })
        // 刷新列表
        this.getChoiceList()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 展示预览的弹层
    async ShowPreview (id) {
      this.showPreviewDialog = true
      this.preSubjectId = id
      // debugger
      // 调用子组件的方法
      await this.$refs.questionPreview.getQuestionInfo(id)
      // 弹出弹层
      // debugger
      this.showPreviewDialog = true
    },
    // 审核
    async checkQuestion (id) {
      this.preSubjectId = id
      // await choiceCheck({ id })
      this.showCheckDialog = true
      // await this.$refs.questionCheck.getQuestionInfo(id)
    },
    // 上架和下架
    // 传一个type???
    async choicePublishUp (row) {
      try {
        await this.$confirm('您确定上架这道题目吗?', '提示', { type: 'warning' })
        // console.log(this.tableData.publishState)
        await choicePublish({
          id: row.id,
          publishState: row.publishState
        })
        row.publishState = 1
        this.getChoiceList()
        console.log(row.publishState)
        this.$message.success('上架成功')
      } catch (err) {
        console.log(err)
      }
    },
    async choicePublishDown (row) {
      try {
        await this.$confirm('您确定下架这道题目吗?', '提示', { type: 'warning' })
        // console.log(this.tableData.publishState)
        await choicePublish({
          id: row.id,
          publishState: row.publishState
        })
        row.publishState = 1
        this.getChoiceList()
        console.log(row.publishState)
        this.$message.success('下架成功')
      } catch (err) {
        console.log(err)
      }
    },

    // tabs  的业务  审核状态的查询
    async handleClick (tab, event) {
      // console.log(tab)
      const { data } = await choice({
        page: 1,
        pagesize: 100,
        chkState: tab.index === '0' ? null : tab.index - 1
      })
      this.choiceQuestionsList = data.items
      // console.log(this.choiceQuestionsList)
    },
    // 分页*****************
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (nwePage) {
      this.page = nwePage
      this.getChoiceList()
    },
    // 搜索功能
    async searchInfoOK (e1, e2) {
      debugger
      const { data } = await choice({ subjectName: e1, keyword: e2 })
      console.log(data)
    }
    // // 审核刷新页面
    // CheckOK () {
    //   alert(11)
    //   this.getChoiceList()
    // }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  margin: 15px 0 0 15px;
  .demo-form {
    margin-top: 20px;
  }
  font-size: 20px;
  .que-total {
    font-size: 13px;
    color: #909399;
    height: 30px;
    line-height: 30px;
    background-color: #f4f4f5;
    margin: 10px 0;
    position: relative;
    .el-icon-info {
      position: absolute;
      top: 8px;
      left: 10px;
      color: #909399;
    }
    .que-text {
      padding-left: 30px;
    }
  }
}
</style>
